@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Regular.ttf');
}
@font-face {
  font-family: 'DMSans-Medium';
  src: url('../fonts/DMSans-Medium.ttf');
}
@font-face {
  font-family: 'DMSans-Bold';
  src: url('../fonts/DMSans-Bold.ttf');
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf');
}
/* * {
  touch-action: pan-y;
} */
body,
.page {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently not supported by any browser */
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /* padding-top: 1px; */
  font-size: 0.16rem;
  background-color: #f0f4f7;
}
.tab-row {
  position: relative;
  width: 100%;
  height: 18.7vw;
  background-color: rgba(242, 238, 237, 1);
}
.tabs {
  position: absolute;
  width: 91.5%;
  height: 54.3%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  mix-blend-mode: normal;
  border-radius: 0.18rem;
}
.day {
  position: absolute;
  width: 24.49%;
  height: 84.2%;
  left: 0.9%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  /* identical to box height */
  text-align: center;
  letter-spacing: -0.084px;
  color: #094fb9;
}
.line_1 {
  position: absolute;
  width: 1px;
  height: 25%;
  left: 25.29%;
  top: 50%;
  transform: translate(0, -50%);
  background: #f0f4f7;
  border-radius: 0.5px;
}
.week {
  position: absolute;
  width: 24.49%;
  height: 84.2%;
  left: 25.43%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  /* identical to box height */
  text-align: center;
  letter-spacing: -0.084px;
  color: #094fb9;
}
.line_2 {
  position: absolute;
  width: 1px;
  height: 25%;
  left: 49.85%;
  top: 50%;
  transform: translate(0, -50%);
  background: #f0f4f7;
  border-radius: 0.5px;
}
.month {
  position: absolute;
  width: 24.49%;
  height: 84.2%;
  left: 50%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  /* letter-spacing: -0.084px; */
  color: #094fb9;
}
.line_3 {
  position: absolute;
  width: 1px;
  height: 25%;
  left: 74.44%;
  top: 50%;
  transform: translate(0, -50%);
  background: #f0f4f7;
  border-radius: 0.5px;
}
.year {
  position: absolute;
  width: 24.49%;
  height: 84.2%;
  right: 0.9%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  /* letter-spacing: -0.084px; */
  color: #094fb9;
}
.tab-text {
  position: absolute;
  width: max-content;
  font-size: 16px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.active {
  width: 25%;
  height: 84.2%;
  background: #094fb9;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12);
  border-radius: 0.32rem;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 21px;
  /* identical to box height */
  text-align: center;
  letter-spacing: -0.084px;
  color: #ffffff;
  z-index: 99;
}
.swiper-container,
.swiper-wrapper {
  position: relative;
  width: 100%;
  /* height: max-content; */
}
.swiper-wrapper {
  height: auto !important;
}
.swiper-slide {
  height: 1000px;
} /* 随意指定一个height值即可,高度tab页自适应 */
.swiper-slide-active {
  height: auto;
}
.card_1,
.card2_1,
.card2_2,
.card3_1,
.card4_1,
.card5_1,
.card_week_1 {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 4.3vw;
  width: 91.5%;
  height: 51.7vw;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 0.24rem;
}
.card_1 {
  height: 56.53vw;
}
.card_week_1 {
  height: 56.8vw;
}
.card2_1 {
  height: 34.7vw;
  display: none;
}
.card_2,
.card_2_2 {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 4.3vw;
  width: 91.5%;
  height: 74.4vw;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 0.24rem;
  padding-top: 1px;
}
.card2_2 {
  height: 25.33vw;
}
.card_chart {
  position: relative;
  width: 100%;
  height: 30%;
  margin: 0;
  padding: 0;
}
.card_3 {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 4.3vw;
  margin-bottom: 4.3vw;
  width: 91.5%;
  height: max-content;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 0.24rem;
  padding-top: 1px;
}
.title-row-top {
  position: relative;
  width: 100%;
  height: max-content;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 21px;
  line-height: 27px;
  text-align: center;
  margin-bottom: 1%;
}
.title-row {
  position: relative;
  width: 100%;
  height: 36%;
}
.title-row2 {
  position: relative;
  width: 100%;
  height: 55.4%;
}
.title-row4 {
  position: relative;
  width: 100%;
  height: 50%;
}
.img {
  position: absolute;
  width: 10.7vw;
  height: 10.7vw;
  left: 4.7%;
  top: 50%;
  transform: translate(0, -50%);
}
.title-text-day,
.title-text-week {
  position: absolute;
  left: 21%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  /* line-height: 0.36rem; */
  /* identical to box height */

  color: #093147;
}
.title-text-week1,
.title-text-week2,
.title-text-week3 {
  position: absolute;
  left: 21%;
  top: 40%;
  transform: translate(0, -50%);
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  /* line-height: 0.36rem; */
  /* identical to box height */

  color: #093147;
}
.title-text-week3 {
  top: 50%;
}
.card-line {
  position: absolute;
  left: 50%;
  top: 43.1%;
  width: 90.7%;
  height: 2px;
  background: rgba(239, 240, 240, 1);
  transform: translate(-50%, 0);
}
.card-line-week {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 90.7%;
  height: 2px;
  background: rgba(239, 240, 240, 1);
  transform: translate(-50%, 0);
}
.card-line2 {
  position: absolute;
  left: 50%;
  top: 55.4%;
  width: 90.7%;
  height: 2px;
  background: rgba(239, 240, 240, 1);
  transform: translate(-50%, 0);
}
.card-line4 {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 90.7%;
  height: 2px;
  background: rgba(239, 240, 240, 1);
  transform: translate(-50%, 0);
}
.card-line5 {
  position: absolute;
  left: 50%;
  top: 64px;
  width: 90.7%;
  height: 2px;
  background: rgba(239, 240, 240, 1);
  transform: translate(-50%, 0);
}
.stage-row {
  position: relative;
  margin: 0 auto;
  margin-top: 2%;
  width: 100%;
  height: 12.4%;
  /* border: 1px solid #000; */
}
.deep {
  margin-top: 9%;
}
.deep-alone {
  margin-top: 5%;
}
.deep-week {
  margin-top: 9%;
}
.deep-dot,
.light-dot,
.awake-dot {
  position: absolute;
  left: 4.7%;
  top: 50%;
  transform: translate(0, -50%);
  width: 3.2vw;
  height: 3.2vw;
  background: #0084cd;
  border-radius: 4px;
}
.deep-text,
.light-text,
.awake-text {
  position: absolute;
  left: 12.8%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
  color: #093147;
}
.deep-data,
.light-data,
.awake-data,
.deep-data_2,
.light-data_2,
.awake-data_2,
.deep-data3,
.light-data3,
.awake-data3 {
  position: absolute;
  right: 4.7%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
  color: #093147;
}
.deep-data2 {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
  color: #093147;
}
#deep-data2,
#deep-data3 {
  left: 4.7%;
}
.detail-title {
  position: relative;
  width: 90.7%;
  height: max-content;
  display: block;
  margin: 0 auto;
  margin-top: 16px;
  /* text-align: justify; */
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  color: #093147;
}
.detail-content {
  position: relative;
  width: 90.7%;
  height: max-content;
  display: block;
  margin: 0 auto;
  margin-top: 16px;
  padding-bottom: 16px;
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  color: #093147;
}
.subtext-week {
  position: absolute;
  width: max-content;
  height: max-content;
  left: 21%;
  top: 26%;
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  color: #093147;
}

.lab {
  position: absolute;
  right: 4.1%;
  top: 46%;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
}
.adjust {
  margin-top: 1.5%;
}
.deep-week {
  margin-top: 9%;
}
.chart {
  position: relative;
  width: 96%;
  height: 84%;
  margin-top: 7%;
}
.chart-title {
  position: absolute;
  top: 5.7%;
  right: 4.7%;
  width: max-content;
  height: max-content;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  text-align: right;
  color: #093147;
}
.time-row {
  position: absolute;
  top: 3%;
  left: 0;
  width: 100%;
  height: 10%;
}
.left-time {
  position: absolute;
  top: 50%;
  left: 15%;
  width: max-content;
  height: max-content;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  transform: translate(0, -50%);
  color: #093147;
}
.right-time {
  position: absolute;
  top: 50%;
  right: 5%;
  width: max-content;
  height: max-content;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  transform: translate(0, -50%);
  color: #093147;
}
.text-adjust {
  position: absolute;
  left: 4.7%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #093147;
}
.text-tow {
  position: relative;
  width: 100%;
  height: max-content;
}
.row {
  position: relative;
  width: 100%;
  height: 6.4vw;
  margin-top: 4%;
}
.snore_time {
  position: absolute;
  left: 4.7%;
  font-size: 14px;
  font-family: DMSans-Bold;
  font-weight: normal;
  text-align: left;
  color: #093147;
}
.time_length {
  position: absolute;
  right: 4.7%;
}
.snoretips_card {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 4.3vw;
  width: 91.5%;
  height: 213px;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 24px;
}
.top-row {
  position: relative;
  width: 100%;
  height: 64px;
}
.snore_img {
  position: absolute;
  left: 4.7%;
  top: 50%;
  transform: translate(0, -50%);
  width: 14.9vw;
  height: 8.53vw;
}
.top-text {
  position: absolute;
  left: 25.7%;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 18px;
  font-family: DMSans-Bold;
  font-weight: normal;
  text-align: LEFT;
  color: #093147;
}
.tips-content {
  position: relative;
  width: 91.5%;
  height: max-content;
  margin: 0 auto;
  margin-top: 4%;
  font-size: 18px;
  font-family: DM Sans;
  font-weight: 400;
  text-align: left;
  color: #093147;
}
.hrvcard {
  position: relative;
  display: none;
  width: 91.5%;
  height: 68.5vw;
  margin: 0 auto;
  margin-top: 4.3vw;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 0.24rem;
}
.size1 {
  height: 68.5vw;
}
.size2 {
  height: 60.8vw;
}
.size3 {
  height: 135.7vw;
}
.hrv_title {
  position: absolute;
  top: 8%;
  left: 50%;
  width: max-content;
  transform: translate(-50%, 0);
  font-size: 18px;
  font-family: DMSans-Bold;
  font-weight: normal;
  text-align: CENTER;
  color: #093147;
}
.hrv_line {
  position: absolute;
  top: 45.45%;
  left: 50%;
  width: 93.2%;
  height: 2px;
  transform: translate(-50%, 0);
  background: #eff0f0;
}
.hrv_num_1,
.hrv_num_2,
.hrv_num_3,
.hrv_num_4 {
  position: absolute;
  top: 23.8%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 24px;
  font-family: DMSans-Bold;
  font-weight: normal;
  text-align: CENTER;
  color: #093147;
}
.hrv_text {
  position: absolute;
  top: 53.8%;
  left: 50%;
  width: 93.2%;
  transform: translate(-50%, 0);
  text-align: center;
  font-size: 16px;
  line-height: 23px;
  font-family: DM Sans;
  font-weight: normal;
  text-align: left;
  color: #093147;
}
.hrv_week_title {
  position: absolute;
  width: max-content;
  left: 50%;
  top: 3.1%;
  transform: translate(-50%, 0);
  font-size: 16px;
  font-family: DMSans-Bold;
  font-weight: normal;
  text-align: CENTER;
  color: #093147;
}
.hrv_week_num1,
.hrv_week_num2,
.hrv_week_num3,
.hrv_week_num4,
.hrv_month_num1,
.hrv_month_num2,
.hrv_month_num3,
.hrv_month_num4 {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 24px;
  font-family: DM Sans;
  font-weight: bold;
  text-align: CENTER;
  color: #093147;
}
.hrv-line-week {
  position: absolute;
  top: 24.9%;
  left: 50%;
  width: 93.2%;
  height: 2px;
  transform: translate(-50%, 0);
  background: #eff0f0;
}
.hrv_week_lab {
  position: absolute;
  left: 50%;
  top: 16.7%;
  transform: translate(-50%, 0);
  font-size: 14px;
  font-family: DM Sans;
  font-weight: normal;
  text-align: LEFT;
  color: #093147;
  letter-spacing: 0px;
}
.hrv_week_daterow {
  position: absolute;
  right: 4.7%;
  top: 28.16%;
  font-size: 14px;
  font-family: DM Sans;
  font-weight: bold;
  text-align: RIGHT;
  color: #093147;
}
.hrv_week_chart {
  position: absolute;
  width: 92.6%;
  height: 44.5%;
  left: 50%;
  top: 32.1%;
  transform: translate(-50%, 0);
}
.hrv_week_tips {
  position: absolute;
  width: 90.6%;
  top: 78.8%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 16px;
  font-family: DM Sans;
  font-weight: normal;
  text-align: LEFT;
  color: #093147;
}
.time-toprow {
  position: relative;
  width: 100%;
  height: max-content;
  padding: 0% 0 0 0;
  text-align: center;
  background: rgba(242, 238, 237, 1);
  font-size: 16px;
  line-height: 24px;
  font-family: DM Sans;
  font-weight: normal;
  color: #093147;
}
.title-row {
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 21px;
  line-height: 27px;
  text-align: center;
  padding: 10px 0 5px 0;
  color: #093147;
}
@media screen and (min-width: 768px) {
  .tabs {
    width: 60%;
    height: 4.6vw;
  }
  .tab-text {
    font-size: 15px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: CENTER;
    letter-spacing: 0px;
  }
  .tab-row {
    height: 10.3vw;
  }
  .card_1,
  .card_2,
  .card_3,
  .card_week_1,
  .card2_1,
  .card2_2,
  .card3_1,
  .hrvcard {
    width: 65.9%;
    height: 23.3vw;
    margin-top: 2%;
    border-radius: 24px;
    box-shadow: 0px 2px 6px 0px undefined;
  }
  .size1 {
    height: 28.3vw;
  }
  .size3 {
    height: 55.3vw;
  }
  .card_week_1 {
    height: 30.2vw;
  }
  .card_1,
  .card_week_1,
  .card3_1 {
    margin-top: 6.7vw;
  }
  .card3_1 {
    height: 11.6vw !important;
  }
  .card_2 {
    height: 33.5vw;
  }
  .card_3 {
    height: 19.3vw;
  }
  .card2_1,
  .card2_2 {
    margin-top: 6.7vw;
    height: 15.6vw;
  }

  .detail-title {
    margin-top: 2.2%;
    font-size: 16px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
    line-height: 22px;
  }
  .detail-content {
    font-size: 14px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
    line-height: 22px;
  }
  .title-text-day,
  .title-text-week1,
  .title-text-week2,
  .title-text-week3 {
    left: 16%;
    font-size: 24px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
  }
  .img {
    width: 4.8vw;
    height: 4.8vw;
  }
  .deep {
    margin-top: 2%;
  }
  .deep-text,
  .light-text,
  .awake-text {
    font-size: 18px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
  }
  .deep-dot,
  .light-dot,
  .awake-dot {
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 4px;
  }
  .deep-data,
  .light-data,
  .awake-data,
  .deep-data_2,
  .light-data_2,
  .awake-data_2,
  .deep-data3,
  .light-data3,
  .awake-data3 {
    font-size: 16px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: RIGHT;
    color: #093147;
  }
  #deep-data2,
  #deep-data3 {
    top: 109%;
  }
  .subtext-week {
    left: 16.5%;
    top: 18%;
    font-size: 16px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: RIGHT;
    color: #093147;
  }
  .deep-week {
    margin-top: 10.5%;
  }
  .lab {
    right: 5.1%;
    top: 39%;
    font-size: 12px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: RIGHT;
    color: #093147;
  }
  .chart-title {
    top: 4.7%;
    font-size: 12px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: RIGHT;
    color: #093147;
  }
  .deep-data2 {
    left: 6%;
    top: 109%;
    font-size: 16px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: CENTER;
    color: #093147;
  }
  .card_chart {
    margin-top: 2.5% !important;
  }
  .chart {
    margin-top: 5%;
  }
  .subtext-week {
    top: 25% !important;
    font-size: 14px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
    letter-spacing: 0px;
  }
  .snore_img {
    width: 9.7vw;
    height: 5.7vw;
  }
  .tips-content {
    font-size: 14px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
  }
  .top-text {
    font-size: 16px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
  }
}
